<template>
  <div class="app-container">

    <div class="dd1">
      <div class="d1">
        会议详情
      </div>
      <!--下划线-->
      <div class="x1"></div>
      <div class="d3">
        <div class="d2">
          <el-form label-width="120px">

            <el-form-item label="会议状态">
              <el-select v-model="conference.status" clearable placeholder="请选择">
                <el-option :value="1" label="待参加"/>
                <el-option :value="2" label="进行中"/>
                <el-option :value="3" label="已结束"/>
              </el-select>
            </el-form-item>


            <el-form-item label="会议标题" label-width="120px">
              <el-input v-model="conference.name"/>
            </el-form-item>


            <el-form-item label="会议开始时间">
              <div class="block">
                <el-date-picker
                  v-model="conference.starTimes"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00">
                </el-date-picker>
              </div>
            </el-form-item>

            <el-form-item label="会议结束时间">
              <div>
                <el-date-picker
                  v-model="conference.endTimes"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00">
                </el-date-picker>
              </div>
            </el-form-item>

            <el-form-item label="会议室预计时间">
              <el-input v-model="conference.duration" :rows="1" type="textarea"/>
            </el-form-item>

            <el-form-item label="会议室地址">
              <el-input v-model="conference.meetingaddress" :rows="2" type="textarea"/>
            </el-form-item>

            <el-form-item label="会议室简介">
              <el-input v-model="conference.room" :rows="8" type="textarea"/>
            </el-form-item>

          </el-form>
        </div>
      </div>

      <div style="clear: both">
        <div class="d1">
          与会人员
        </div>
        <!--下划线-->
        <div class="x1"></div>
        <!-- 已确认开始       -->
        <div >
          <div class="ds1">
            已确认
          </div>
          <br>
          <br>
          <!--头像        -->
          <div class="block" v-for="size in lpeo1" :key="size.mid">
            <div class="t1">
              <el-avatar :size="80" :src="size.picture"></el-avatar>
              <div style="float: left;margin: -80px 0px 0px 100px;" @click="delemp(size)">
                <i class="el-icon-error" color="#2979ff" size="25"></i>
              </div>
              <div>{{ size.name }}</div>
            </div>
          </div>
          <div  class="dingwei" @click="addemp(1)" style="width: 55px;height: 55px;float: left;margin: 15px 0px 0px 5px;">
            <i class="el-icon-circle-plus-outline" style="font-size: 60px"></i>
          </div>
          <div style="clear: both"></div>
        </div>
        <!-- 已确认结束       -->
        <!--下划线-->
        <div class="x1"></div>
        <!-- 已拒绝开始       -->
        <div >
          <div class="ds1">
            已拒绝
          </div>
          <br>
          <br>
          <!--头像        -->
          <div class="block" v-for="size in lpeo2" :key="size.mid">
            <div class="t1">
              <el-avatar :size="80" :src="size.picture"></el-avatar>
              <div style="float: left;margin: -80px 0px 0px 100px;" @click="delemp(size)">
                <i class="el-icon-error" color="#2979ff" size="25"></i>
              </div>
              <div>{{ size.name }}</div>
            </div>
          </div>
          <div  class="dingwei" @click="addemp(2)" style="width: 55px;height: 55px;float: left;margin: 15px 0px 0px 5px;">
            <i class="el-icon-circle-plus-outline" style="font-size: 60px"></i>
          </div>
          <div style="clear: both"></div>
        </div>
        <!-- 已拒绝结束       -->
        <!--下划线-->
        <div class="x1"></div>
        <!-- 未确认开始       -->
        <div >
          <div class="ds1">
            未确认
          </div>
          <br>
          <br>
          <!--头像        -->
          <div class="block" v-for="size in lpeo3" :key="size.mid">
            <div class="t1">
              <el-avatar :size="80" :src="size.picture"></el-avatar>
              <div style="float: left;margin: -80px 0px 0px 100px;" @click="delemp(size)">
                <i class="el-icon-error" color="#2979ff" size="25"></i>
              </div>
              <div>{{ size.name }}</div>
            </div>
          </div>
          <div  class="dingwei" @click="addemp(3)" style="width: 55px;height: 55px;float: left;margin: 15px 0px 0px 5px;">
            <i class="el-icon-circle-plus-outline" style="font-size: 60px"></i>
          </div>
          <div style="clear: both"></div>
        </div>
        <!-- 未确认结束       -->




      </div>

        <el-button :disabled="saveBtnDisabled" type="primary"
                   @click="saveOrUpdate">保存
        </el-button>
        <el-button :disabled="saveBtnDisabled"
                   @click="fanhui">返回
        </el-button>

    </div>

    <el-dialog :visible.sync="dialogFormVisible" title="" width="50%">

      <div style="margin: 0px auto">
        <div v-for="(item, index) in emplist" class="vi1">
          <div class="vi2">
            <div class="flex-row wrapper">
              <el-avatar :size="80" :src="item.picture"></el-avatar>
<!--              <u-image class="im" :src="item.picture" width="112rpx" height="112rpx" shape="circle"></u-image>-->

              <div class="flex-col flex-row wraper-col vi3">
                <div class="u-line-1 text">{{item.name}}</div>
              </div>
            </div>
          </div>
          <div>
            <!-- 添加点击事件 @click="affirm(item.eid)" -->

            <el-button @click="affirm(item.eid)" class="button1" type="primary">
              添加
            </el-button>
          </div>

        </div>
      </div>

      <div slot="footer"  class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :disabled="saveBtnDisabled" @click="saveOrUpdates">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  data() {    ///定义变量和初始值
    return {
      conference: {},
      renshu: 0,
      lpeo1: {},
      lpeo2: {},
      lpeo3: {},
      sta:1,
      emplist:null,
      imagecropperShow: false, // 上传弹窗组件是否显示
      BASE_API: process.env.BASE_API,//获取dev.env.js里面的地址
      imagecropperKey: 0,  //上传组件key的值
      dialogFormVisible: false,
      saveBtnDisabled: false,// 保存按钮是否禁用,
    }
  },

  created() {  //页面渲染之前执行
    this.init()
  },

  watch: {
    $route(to, from) {
      this.init()
    }
  },

  methods: {


    //路由切换/导航切换（代码抽取）
    init() {
      // 判断路径中是否有id值,并执行根据id查询讲师
      if (this.$route.params && this.$route.params.mid) {
        //从路径获取Id值
        const mid = this.$route.params.mid
        console.log(mid)
        this.conference.mid = mid
        //根据id查询的方法
        this.getInfo(mid)
      } else {  //路径没有id值，做添加
        //清空表单
        this.conference = {}
      }
    },


    // 根据讲师id查询的方法
    getInfo(mid) {
      this.$axios
        .get("http://localhost:8007/conference/mine/getId/"+ mid,)
        .then((res) => {
          this.conference = res.data.data.mVo
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败

      this.$axios
        .get("http://localhost:8007/conference/mine/getIdMP/" + this.conference.mid + "/" + 1 + "/" + 1)
        .then((res) => {
          this.lpeo1 = res.data.data.lpeo
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败
      this.$axios
        .get("http://localhost:8007/conference/mine/getIdMP/" + this.conference.mid + "/" + 2 + "/" + 1)
        .then((res) => {
          this.lpeo2 = res.data.data.lpeo
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败
      this.$axios
        .get("http://localhost:8007/conference/mine/getIdMP/" + this.conference.mid + "/" + 3 + "/" + 1)
        .then((res) => {
          this.lpeo3 = res.data.data.lpeo
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败


    },

    fanhui(){
      history.back(-1)
    },

    //保存按钮
    saveOrUpdate() {
        this.dialogFormVisible = false //保存按钮是否禁用（避免重复提交）

        // 判断是添加/修改讲师的方法
        if(!this.conference.mid){
            //添加
            console.log("1")
            this.saveTeacheradd()
        }else{
            //修改
            this.updateTeacher()
            console.log("2")

        }
    },

    //修改讲师的方法
    updateTeacher(){

      this.$axios
        .post("http://localhost:8007/conference/mine/updateMine",this.conference)
        .then(response => {
          // 提示信息
          return this.$message({
            type: 'success',
            message: '修改成功!'
          });
        })
        .then(resposne => {
          // 回到列表页面,路由跳转
          this.$router.push({ path: '/mine/mineList' })
        })
        .catch((response) => {
          // console.log(response)
          this.$message({
            type: 'error',
            message: '修改失败'
          })
        })

    },

    // 添加讲师的方法
    saveTeacheradd() {
      this.conference.meetingenter = 1
      this.$axios
        .post("http://localhost:8007/conference/mine/addMine",this.conference)
        .then(response => {
          // 提示信息
          return this.$message({
            type: 'success',
            message: '添加成功!'
          });
        })
        .then(resposne => {
          // 回到列表页面,路由跳转
          this.$router.push({ path: '/mine/mineList' })
        })
        .catch((response) => {
          // console.log(response)
          this.$message({
            type: 'error',
            message: '添加失败'
          })
        })

    },

    delemp(item){

      console.log(item)
      this.$axios
        .delete("http://localhost:8007/conference/mine/removeemp/" + this.conference.mid + "/" + item.eid)
        .then(resposne => {
          this.init()
          this.$message({
            type: 'success',
            message: '删除参与人成功!'
          });
        })
    },
    addemp(meetingenter){
      this.sta = meetingenter
      this.getList()
      console.log("111++"+meetingenter)
      this.dialogFormVisible = true

    },

    getList() {

      this.$axios
        .get("http://localhost:8007/conference/mine/getemp/" + this.conference.mid)
        .then((res) => {
          this.emplist = res.data.data.employee;
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败
    },
    affirm(eid) { //确认参加

      var m = {
        meetingid: this.conference.mid,
        meetingenter: this.sta,
        userid: eid,
        status: 1
      }
      console.log(m)

      this.$axios
        .post("http://localhost:8007/conference/mine/addMine",m)
        .then(response => {
          this.getList()
          // 提示信息
          return this.$message({
            type: 'success',
            message: '添加参与人成功!'
          });
        })

    },
    saveOrUpdates(){
      this.dialogFormVisible = false //保存按钮是否禁用（避免重复提交）
      this.getInfo()
    },

    // close(){//关闭上传弹窗的方法
    //     this.imagecropperShow = false // 上传弹窗组件关闭
    // },
    //
    // cropSuccess(data){  //上传成功的方法
    //
    //     this.imagecropperShow = false // 上传弹窗组件关闭
    //
    //     //上传成功后接口的返回值是一个图片地址url
    //         //注意-- 此处的data类似于response.data.url
    //
    //     this.teacher.avatar = data.url
    //
    //     // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
    //     this.imagecropperKey = this.imagecropperKey + 1
    // },
  }
}
</script>

<style>

.dd1 {
  background-color: #fff;
  height: 1500px;
}

.d1 {
  font-size: 22px;
  float: left;
  margin: 20px 0px 20px 80px;
}

.x1 {
  clear: both;
  width: 88%;
  border-bottom: 2px solid #f5f5f5;
  margin-bottom: 20px;
}

.d2 {
  margin: 20px 0px 0px 50px;
  height: 500px;
  width: 500px;
  background-color: #Fff;
}

.d3 {
  clear: both;
  height: 600px;
  width: 70%;
  background-color: #Fff;
}

.ds1 {
  font-size: 20px;
  float: left;
  margin: 0px 0px 20px 160px;
}

.t1 {
  width: 100px;
  height: 120px;
  font-size: 18px;
  float: left;
  margin: 0px 0px 20px 10px;
}
.butt1 {
  padding: 25px 0px 25px 0px;
  font-size: 18px;
  background-color: #2979ff;
  color: #3875f2;
  border-color: #f8f8f8;
  border-radius: 50%;
}

.vi1 {
  width: 91%;
  height: 130px;
  background-color: white;
  margin: 0px 0px 0px 80px;
}

.vi2 {
  float: left;
  margin: 15px 0px 0px 20px;
}

.vi3 {
  margin: 0px 0px 0px 10px;
}

.button1 {
  width: 80px;
  float: left;
  margin-left: 40px;
  margin-top: 50px;
  background: #2979ff;
  border-radius: 10px;
  border-color: #2979ff;
}
</style>
